<template>
  <div class="container">
    <!-- 头部导航 -->
    <div class="index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">待接单<i class="el-icon-close"></i></div>
    </div>
    <div class="title-receiving">
      <div>
        <span>订单管理</span>/<span class="detail">待接单详情</span>
      </div>
        <el-button type="success" @click="toBack">返回</el-button>
     </div>
    <div class="num-time">
        <span>订单编号:{{form.order_no}}</span><span class="time">下单时间:{{ form.create_time | dateformat('YYYY-MM-DD HH:mm')}}</span>
    </div>  
   
    <div class="container-box">
      <h3 class="marginb20">订单信息</h3>
      <div class="content-form">
        <el-form ref="form"
                 :model="form"
                 label-position="left"> 
          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="姓名"
                            label-width="80px">
                <el-input type="text"
                          v-model="form.realname"
                          ></el-input>
              </el-form-item>
            </div>
            <div class="service">
              <el-form-item label="手机号"
                            label-width="80px">
                <el-input type="text"
                          v-model="form.phone"
                          id="copyVal"
                         ></el-input>
                
              </el-form-item>
              <span class="copyBtn" @click="copyConsignee"  data-clipboard-target="#copyVal">复制</span>
            </div>
          </div>

          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="装修面积"
                            label-width="80px">
                <el-input type="text"
                          v-model="form.house_area"
                          ></el-input>
              </el-form-item>
            </div>
            <div class="service">
              <el-form-item label="装修位置"
                            label-width="80px">
                <el-input type="text"
                          v-model="form.address"
                          ></el-input>
              </el-form-item>
            </div>
          </div>

          <div class="form-textarea marginb20">
            <el-form-item label="装修预算" label-width="80px">
              <el-input type="text" style="width:30%;" v-model="thinkPrice"></el-input>万元
            </el-form-item>
          </div>
          <div class="form-textarea marginb20">
            <el-form-item label="诉求" label-width="80px">
              <el-input type="textarea"
                        rows="5"
                        cols="140"
                        v-model="form.remark"
                        ></el-input>
            </el-form-item>
          </div>
          <div class="imgBox">
            <el-form-item label="户型图" label-width="80px">
              <el-image 
                v-for="(item,index) in srcList"
                :key="index"
                :src="item"
                style="width: 150px; height: 150px"
                :preview-src-list="srcList">
              </el-image>
            </el-form-item>
          </div>
          
        </el-form>
      </div>
    </div>
    <div class="df-c primary-btn">
            <el-button type="primary"
                       class=""
                       @click="handleReceiving">接单</el-button>
    </div>
  </div>
</template>

<script>
	import ClipboardJS from 'clipboard';
export default {
  data () {
    return {
      form: {

      },
      thinkPrice:"",
      srcList:[]
    }
  },
  mounted () {
    let order_id = this.$route.query.order_id;
    console.log(this.$route.query,123);
    let params = {
      id: order_id
    }
    let role = localStorage.getItem('role')
    let url = role=='decoration'?'/api/admin/decoration/DesignOrder/view':'/api/admin/designer/DesignerOrder/view';
    this.$http.post(url,params).then(res => {
      console.log('待接单详情数据', res);
      if(res.code==1){
        this.form = res.data;
        this.thinkPrice = res.data.renovate_budget;
        if(res.data.house_thumb_url){
          let imgArr = res.data.house_thumb_url
          let imgSta = Array.isArray(imgArr)
          if(imgSta){
            imgArr.map(item=>{
              this.srcList.push(item.path)
            })
          }else{
            this.srcList.push(imgArr.path)
          }
        }
        this.form.address = res.data.province + res.data.city + res.data.district
      }
    })

  },
  methods: {
    handleReceiving(){
      let order_id = this.$route.query.order_id;
      let params = {
        id: order_id
      }
      this.$api.DesignerOrder_accept(params).then(res => {
      console.log('待接单详情数据', res);
      if(res.code==1){
        this.$message({
          message: '接单成功',
          type: 'success'
        });
      }
    })
    },
    // 返回
    toBack(){
      this.$router.back(1)
    },
    // 实现复制功能
			copyConsignee() {
				// 括号中的内容：对应复制按钮的class
				let copyBtn = new ClipboardJS('.copyBtn')

        copyBtn.on("success",function(e){
            // 复制成功
            // console.log(e);
            alert("复制成功");
            e.clearSelection();
        });
        copyBtn.on("error",function(e){
            //复制失败；
            console.log( e.action )
        });
			},
  }

}
</script>

<style scoped lang="less">
.current {
  padding-left: 20px;
}
.marginb20 {
  margin-bottom: 20px;
}
.form-logo {
  padding: 0 10px;
}
.form-item {
  display: flex;
  // justify-content: space-between;
  align-items: center;
 
  .el-form-item {
    /* width: 1490px; */
    width: 95%;
  }
}
 .text {
    font-size: 12px;
    color: #5692fa;
    margin-left: 10px;
  }

.content-form .el-form-item {
  margin-bottom: 0 !important;
}

.form-tel {
  display: flex;
  .tel-input {
    margin-right: 240px;
    display: flex;
    align-items: center;
  }
  .change {
    font-size: 12px;
    color: #5692fa;
    margin-left: 10px;
  }
  .service {
    display: flex;
    align-items: center;
  }
}

.form-time {
  display: flex;
}
.service-time {
  margin-right: 100px;
  margin-left: 8px;
}
.form-textarea {
  padding-left: 14px;
  .el-form-item {
    // display: flex;
  }
}
.submit-btn {
  padding: 0 0 50px 0;
}
// 户型图
.imgBox{
  img{
    border: 1px solid #ccc;
    max-width: 260px;
    max-height: 260px
  }
}
//图片上传样式
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar{
  width: 178px;
  height: 178px;
}
.form-logo {
  display: flex;
}
.bg-logo {
  margin-right: 250px;
}

.title-receiving{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px;
  .detail{
    color: #409eff;
  }
}
.num-time{
  margin: 20px;
  .time{
    margin-left: 30px;
  }
}
.primary-btn{
  margin-top: 40px;
}
.form-textarea{
  margin-left: 0;
  padding-left: 0;
}
.copyBtn{
  color: #007acc;
  margin-left: 10px;
  cursor: pointer;
}
</style>